<template>
    <div>
        <Drawer title="治疗详细" v-model="drawer" width="880" :mask-closable="true" :styles="styles">
            <Form :model="createData" ref="create" :rules="createRules" label-position="top">
                <Row :gutter="32" >
                    <Col span="32">
                        <div >
                            <span class="detailed">{{ createData.name }} , {{ createData.gender }}, {{ createData.age }} </span>
                            <span> {{createData.patient_card_id}}</span>
                        </div>
                    </Col>
                    <Col>
                        <div class="t-main">
                            <div class="surplus ivu-pt-16">
                                <Row :gutter="16" >
                                    <i-Col span="8" class="ivu-mb-16" v-for="(item, index) in user_surplus" :key="index" >{{item.clinic_project_name}} <span>正常：<b>{{item.total_num}}</b> 援助：<b class="assinstance">{{item.help_num}}</b></span></i-Col>
                                </Row>
                            </div>
                        </div>
                    </Col>
                </Row>
                <Row :gutter="32" type="flex">
                    <Col>
                        <FormItem prop="start_time">
                            <DatePicker v-model="Time" type="date"  placement="bottom-end" placeholder="请输入治疗日期" @on-change="submit" />
                        </FormItem>
                    </Col>
                    <Col span="7">
                        <FormItem prop="start_time">
                            <Select  v-model="risk_type_id" placeholder="请选择治疗项目" element-id="diagnosis" clearable  @on-change="submit">
                                <Option v-for="(item,index) in treatment_project" :key="item.clinic_project_id" :value="item.clinic_project_id" :disabled="+item.status === 0">{{item.clinic_project_name}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <Table size="small" ref="table" :columns="columns" :data="data"  >
                <template slot-scope="{ row }" slot="info">
                    <span >{{ row.clinic_project_name}}</span>
                </template>
                <template slot-scope="{ row }" slot="num">
                    <span >{{ row.num}}</span>
                </template>
                <template slot-scope="{ row }" slot="operate_name">
                <span v-if="row.operate_name">
                    <span v-if="row.operate_name.length < 4">
                        {{row.operate_name}}
                    </span>
                    <Poptip v-else word-wrap transfer trigger="hover" placement="bottom" width="200" :content="row.operate_name">
                        {{row.operate_name.substring(0, 3)}}…
                    </Poptip>
                </span>
                    <span v-else>无</span>
                </template>
                <template slot-scope="{ row, index }" slot="action">
                    <a v-if="row.type === '1'" @click="open(row)" >详细</a>
                </template>
            </Table>
            <div class="ivu-mt ivu-text-center">
                <Page
                        :total="total"
                        :current.sync="page"
                        show-total
                        show-elevator
                        @on-change="handleChangePage"
                        :page-size="pageSize"
                        show-sizer transfer
                        @on-page-size-change="handleChangePageSize"
                />
            </div>
        </Drawer>
        <Drawer
                title="详细"
                width="500"
                v-model="isShow"
                :mask-closable="true"
                :styles="styles"
        >
            <span>{{user_patient.recently_clinic_time}}</span>
            <Table v-if="temp === 1"  size="small" border ref="table" :columns="detailed" :data="treatmentDetail" >
                <template slot-scope="{ row }" slot="dose">
                    {{ row.dose + '/mj' }}
                </template>
            </Table>
            <Table v-else-if="temp === 2"  size="small" border ref="table" :columns="columns2" :data="treatmentDetail" >
                <template slot-scope="{ row }" slot="dose">
                    {{ row.dose + '/ms' }}
                </template>
            </Table>
            <Table v-else-if="temp === 3" size="small" border ref="table" :columns="columns3" :data="treatmentDetail" >
                <template slot-scope="{ row }" slot="dose">
                    {{ row.dose + '/ms' }}
                </template>
            </Table>
            <Table v-else-if="temp === 4" size="small" border ref="table" :columns="columns4" :data="treatmentDetail" >
                <template slot-scope="{ row }" slot="dose">
                    {{ row.dose + '/ms' }}
                </template>
            </Table>
            <Table v-else-if="temp === 5" size="small" border ref="table" :columns="columns5" :data="treatmentDetail" >
                <template slot-scope="{ row }" slot="dose">
                    {{ row.dose + '/min' }}
                </template>
            </Table>
            <p class="ivu-m-16">
                <span style="margin-right: 5px">本次治疗:<strong>{{user_patient.recently_num}}</strong> </span>
                <span>本次剩余:<strong>{{user_patient.num}}</strong> </span>
            </p>
            <p v-if="temp === 1" class="ivu-m-16" >
                <span>备注:{{ user_patient.remark }}</span>
            </p>
            <p class="ivu-m-16 sign-area">
                <span class="sign-label">患者签名:</span>
                <strong class="sign-img">
                    <img :src="user_patient.patient_signature" alt="">
                </strong>
            </p>
        </Drawer>
    </div>
</template>

<script>
    import { PatientUpdata, searchCity } from '@/api/patient'
    import { GetTreatment, GetTreatmentDetail } from '@/api/setting'
    import dayjs from 'dayjs'
    export default {
        name: 'editPatient',
        data () {
            return {
                risk_type_id:'',
                drawer: false,
                queryLoading: false,
                city_list: [],
                formData: {
                    personnel: [],
                    Occupation: '',
                    Effect: '',
                    risk: '',
                    Diagnosis: ''
                },
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() < Date.now() - 86400000;
                    }
                },
                isShow: false,
                patientId: '',
                customerType: false,
                medicalType: false,
                createData: {
                    id: '',
                    name: '',
                    birthday: '',
                    age: 0,
                    nickname: '',
                    wx_name: '',
                    source_channel_id: '',
                    gender: '0',
                    mobile: '',
                    city_id: '',
                    address: '',
                    patient_diseases_id: '',
                    patient_diseases_child_id: '',
                    body_parts_ids: [],
                    tags_ids: [],
                    belong_member_id: '',
                    belong_assistant_id: '',
                    effect_type_id: [],
                    risk_type_id: [],
                    clinic_assess_id: [],
                    outpatient_type_id: [],
                    clinic_id: '',
                    profession: '',
                    kf_next_callback_time: '',
                    yz_next_callback_time: '',
                    next_revisiting_time: '',
                    remark: ''
                },
                styles: {
                    height: 'calc(100% - 55px)',
                    overflow: 'auto',
                    paddingBottom: '53px',
                    position: 'static'
                },
                createRules: {
                    name: [{ required: true, message: '请输入患者名称', trigger: 'blur' }],
                    // belong_member_id: [{ required: true, message: '请选择客服归属人', trigger: 'blur' }],
                    // belong_assistant_id: [{ required: true, message: '请选择医助归属人', trigger: 'blur' }],
                    mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
                    // clinic_id: [{ required: true, message: '请选择诊室', trigger: 'blur' }],
                    // kf_next_callback_time: [{ required: true, type: 'date', message: '请选择就诊时间', trigger: 'blur' }],
                    // yz_next_callback_time: [{ required: true, type: 'date', message: '请选择就诊时间', trigger: 'blur' }]
                },
                baseInfo: {
                    source_channel_list: [],
                    patient_diseases_list: [],
                    body_parts_list: [],
                    tags_list: [],
                    member_list: [],
                    effect_type_list: [],
                    risk_type_list: [],
                    clinic_assess_list: [],
                    outpatient_type_list: [],
                    clinic_list: []
                },
                editType: 1, // 1 客服编辑  2 患者(医助)编辑
                patient_level_list: [],
                detailed: [
                    {
                        title: '大部位',
                        key: 'body_parts_large_name',
                        minWidth: 80
                    },
                    {
                        title: '细节部位',
                        key: 'body_parts_small_name',
                        minWidth: 80
                    },
                    {
                        title: '剂量/时间',
                        key: 'dose',
                        solt: 'dose',
                        minWidth: 80
                    },
                    {
                        title: '数量',
                        key: 'num',
                        minWidth: 80
                    }
                ],
                columns2: [
                    {
                        title: '执行数量',
                        align: 'center',
                        key: 'num'
                    },
                    {
                        title: '剂量',
                        align: 'center',
                        slot: 'dose'
                    }
                ],
                columns3: [
                    {
                        title: '执行数量',
                        align: 'center',
                        key: 'num'
                    }
                ],
                columns4: [
                    {
                        title: '执行部位',
                        align: 'center',
                        key: 'body_parts_large_name'
                    },
                    {
                        title: '剂量/时间',
                        align: 'center',
                        slot: 'dose'
                    }
                ],
                columns5: [
                    {
                        title: '执行数量',
                        align: 'center',
                        key: 'num'
                    },
                    {
                        title: '执行时长/时间',
                        align: 'center',
                        slot: 'dose'
                    }
                ],
                columns: [
                    {
                        title: '项目',
                        slot: 'info',
                        minWidth: 150
                    },
                    {
                        title: '数量',
                        key: 'num',
                        slot: 'num',
                        width: 75
                    },
                    {
                        title: '时间',
                        key: 'recently_clinic_time',
                        width: 135
                    },
                    {
                        title: '正常剩余',
                        key: 'total_num',
                        width: 90
                    },
                    {
                        title: '援助剩余',
                        key: 'help_num',
                        width: 90
                    },
                    {
                        title: '操作人',
                        key: 'operate_name',
                        slot: 'operate_name',
                        width: 100
                    },
                    {
                        title: '类型',
                        key: 'type_name',
                        width: 60
                    },
                    {
                        title: '操作',
                        width: 60,
                        slot: 'action'
                    }
                ],
                data: [],
                user_surplus: [],
                treatment_project: [],
                list: [],
                page: 1,
                pageSize: 10,
                total: 0,
                treatmentDetail: [],
                user_patient: [],
                clinic_project_id: '1',
                temp: 1,
                Time: '',
            }
        },
        methods: {
            open (row) {
                this.Time = ''
                this.temp = row.template
                this.isShow = !this.isShow
                GetTreatmentDetail({ clinic_treatment_id: row.id }).then(res => {
                    this.treatmentDetail = res.list
                    this.user_patient = res.user_patient
                })
            },
            submit () {
                this.page = 1
                const config = {
                    start_time: this.Time ? dayjs(this.Time).format('YYYY-MM-DD') : '',
                    end_time: this.Time ? dayjs(this.Time).format('YYYY-MM-DD') : '',
                    page: this.page,
                    pageSize: this.pageSize,
                    patient_card_id: this.createData.patient_card_id,
                    clinic_project_id: this.risk_type_id
                }
                GetTreatment(config).then(res => {
                    this.total = res.list.total
                    this.data = res.list.list
                    this.user_surplus = res.user_surplus
                    this.treatment_project = res.treatment_project
                })
            },
            handleOpenDrawer (id, editType) {
                this.clinic_project_id = id
                this.editType = editType
                this.$refs['create'].resetFields()
                this.drawer = true
                this.$nextTick(() => {
                    const config = {
                        page: this.page,
                        pageSize: this.pageSize,
                        patient_card_id: id,
                        start_time: this.Time ? dayjs(this.Time).format('YYYY-MM-DD') : '',
                        end_time: this.Time ? dayjs(this.Time).format('YYYY-MM-DD') : '',
                        clinic_project_id: this.risk_type_id
                    }
                    GetTreatment(config).then(res => {
                        this.total = res.list.total
                        this.data = res.list.list
                        this.createData = res.user_patient
                        this.user_surplus = res.user_surplus
                        this.treatment_project = res.treatment_project
                    })
                })
            },
            handleChangePage (e) {
                this.page = e
                const config = {
                    page: this.page,
                    pageSize: this.pageSize,
                    patient_card_id: this.clinic_project_id,
                    start_time: this.Time ? dayjs(this.Time).format('YYYY-MM-DD') : '',
                    end_time: this.Time ? dayjs(this.Time).format('YYYY-MM-DD') : '',
                    clinic_project_id: this.risk_type_id
                }
                GetTreatment(config).then(res => {
                    this.total = res.list.total
                    this.data = res.list.list
                    this.createData = res.user_patient
                    this.user_surplus = res.user_surplus
                    this.treatment_project = res.treatment_project
                })
            },
            // 查找字符串
            handleQueryText (query) {
                if (query !== '' && parseFloat(query).toString() === 'NaN') {
                    this.queryLoading = true;
                    return new Promise(resolve => {
                        setTimeout(() => {
                            searchCity({
                                keywords: query
                            }).then(res => {
                                if (res.list && res.list.length > 0) {
                                    const list = res.list.map(item => {
                                        return {
                                            key: item.id + query,
                                            id: item.id,
                                            name: item.name
                                        };
                                    })
                                    this.city_list = list
                                }
                                resolve(res.data)
                            })
                            this.queryLoading = false
                        }, 200)
                    })
                }
            },
            // 监听时间
            handleChangeBirthday (e) {
                if (e !== '') {
                    this.createData.age = dayjs().format('YYYY') - dayjs(e).format('YYYY')
                }
            },
            handleChangePageSize (e) {
                this.pageSize = e
                const config = {
                    page: this.page,
                    pageSize: this.pageSize,
                    start_time: this.Time ? dayjs(this.Time).format('YYYY-MM-DD') : '',
                    end_time: this.Time ? dayjs(this.Time).format('YYYY-MM-DD') : '',
                    patient_card_id: this.clinic_project_id,
                    clinic_project_id: this.risk_type_id
                }
                GetTreatment(config).then(res => {
                    this.total = res.list.total
                    this.data = res.list.list
                    this.createData = res.user_patient
                    this.user_surplus = res.user_surplus
                    this.treatment_project = res.treatment_project
                })
            },
            handleDrawerCancel () {
                this.drawer = false
            },
            handleDrawer () {
                this.$refs.create.validate(valid => {
                    if (valid) {
                        let sendData = JSON.parse(JSON.stringify(this.createData))
                        sendData.edit_type = this.customerType === true && this.medicalType === true ? 3 : this.customerType === true ? 1 : 2
                        sendData.id = this.patientId
                        sendData.edit_type = this.editType
                        sendData.city_id && sendData.city_id !== '' ? sendData.city_id = sendData.city_id.slice(0, 6) : sendData.city_id = ''
                        sendData.body_parts_ids = sendData.body_parts_ids.length > 0 ? sendData.body_parts_ids.join(',') : ''
                        sendData.tags_ids = sendData.tags_ids.length > 0 ? sendData.tags_ids.join(',') : ''
                        sendData.birthday = (sendData.birthday !== undefined && sendData.birthday !== '') ? dayjs(sendData.birthday).format('YYYY-MM-DD') : ''
                        sendData.kf_next_callback_time = (sendData.kf_next_callback_time !== '' && sendData.kf_next_callback_time !== undefined) ? dayjs(sendData.kf_next_callback_time).format('YYYY-MM-DD') : ''
                        sendData.yz_next_callback_time = (sendData.yz_next_callback_time !== '' && sendData.yz_next_callback_time !== undefined) ? dayjs(sendData.yz_next_callback_time).format('YYYY-MM-DD') : ''
                        sendData.next_revisiting_time = (sendData.next_revisiting_time !== '' && sendData.next_revisiting_time !== undefined) ? dayjs(sendData.next_revisiting_time).format('YYYY-MM-DD') : ''
                        PatientUpdata(sendData).then(() => {
                            this.drawer = false;
                            this.$Message.success('编辑成功')
                            this.$emit('ok')
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>
    /deep/.ivu-form-label-top .ivu-form-item-label {
        min-height: 24px;
    }
    /deep/.ivu-form-label-top .ivu-date-picker {
        vertical-align: top;
    }
    .detailed{
        font-size: 16px;
        font-weight: 700;
    }
    .img{
        width: 200px;
        height: 200px;
    }
    .span{
        color: green !important;
    }
    .span1{
        color:orange !important;
        margin-right: 10px;
    }
    .surplus span b.assinstance {
        color:#ff9900;
    }
</style>
